import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

// 引入英文转换库
// import VueI18n from 'vue-i18n'
// 安装插件
// Vue.use(VueI18n)
// 实例化
// const i18n = new VueI18n({
//   // 实例创建的这个地方，可以配置语言和字典
//   locale: 'zh',
//   messages: {
//     en: {
//       hello: 'Hello World'
//     },
//     zh: {
//       hello: '你好 世界'
//     }
//   }
// })

// 引入封装好的i18n配置
import i18n from '@/I18N'

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// 设置element-ui当前的语言
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

Vue.config.productionTip = false
// 自定义全局指令
Vue.directive('fiximg', {
  // 可以使用自定义指令的一些方法
  // inserted 钩子函数，是当使用这个指令的元素插入到页面触发
  inserted(el) {
    console.log(el)
    // 注意，在使用在线地址的时候，需要让资源全部加载完成，再跳转页面
    // el.src = el.src || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrAAcmBwUAPvXL7HKlFpyRQ7BusUGgj2QZ1Q&usqp=CAU'
    // 本地文件使用@ 浏览器会不识别，因为@是webpack的方法，可以使用node.js的required的加载文件
    el.src = el.src || require('@/assets/common/head.jpg')
    el.addEventListener('error', () => {
      el.src = require('@/assets/common/head.jpg')
    })
  }
})
// vue的user机制
import Component from '@/components'
Vue.use(Component) // 注册自己的插件

// 过滤器的使用filter
// 可以自定义过滤函数，也可以从别的地方引入
// Vue.filter('formatDate', (el) => {
//   const date = new Date(el)
//   return date.toLocaleDateString()
// })
// 我们又大量的工具函数，但是我们希望一次性注册成过滤器
// 这时候我们会用到原生js的一些方法来完成这些操作
import * as myFilters from '@/filters'

// 这种写法可以将一个文件中所有的使用export导出的变量一起涌入
// 并且组成一个新的对象
// 组成的新对象，由函数的名组成对象的key值，函数题组成value值，并成为一个键值对
for (const key in myFilters) {
  // 一次性注册全部的过滤器
  Vue.filter(key, myFilters[key])
}

import Print from 'vue-print-nb'
Vue.use(Print)

new Vue({
  el: '#app',
  router,
  store,
  // 挂载到根实例
  i18n,
  render: h => h(App)
})
